<template>
	<div class="app-container">
		<el-table :data="studentList" border style="width: 100%;">
			<el-table-column fixed type="selection" width="55"></el-table-column>
		    <el-table-column prop="follow_type" label="跟进状态" width="120">
				<template slot-scope="scope">
					<el-badge :value="scope.row.is_official == 0?scope.row.follow.length:''" class="item" v-for="(item,index) in status" v-if="scope.row.follow_type == item.value">
					  <el-button size="small">{{item.status_name}}</el-button>
					</el-badge>
				</template>
			</el-table-column>
		    <el-table-column prop="student_name" label="学生姓名" width="120"></el-table-column>
		    <el-table-column prop="sex" label="性别" width="120">
				<template slot-scope="scope">
					<div v-if="scope.row.sex == 1">男</div>
					<div v-if="scope.row.sex == 2">女</div>
				</template>
			</el-table-column>
		    <el-table-column prop="course.school" label="以往就读学校" width="150"></el-table-column>
		    <el-table-column prop="home[0].phone" label="联系方式" width="120"></el-table-column>
		    <el-table-column prop="recruit.teacher_id" label="主跟进人" width="120"></el-table-column>
		    <el-table-column prop="recruit.deputy_teacher_id" label="副跟进人" width="120"></el-table-column>
		    <el-table-column prop="recruit.way_id" label="来源途径">
		    	<template slot-scope="scope" v-if="scope.row.recruit">
		    		<div v-if="scope.row.recruit.way_id == 1">口碑介绍</div>
		    		<div v-if="scope.row.recruit.way_id == 2">电话邀约</div>
		    		<div v-if="scope.row.recruit.way_id == 3">课程邀约</div>
		    		<div v-if="scope.row.recruit.way_id == 4">广告宣传</div>
		    		<div v-if="scope.row.recruit.way_id == 5">网络招生</div>
		    	</template>
		    </el-table-column>
		    <el-table-column fixed="right" label="操作" width="280">
		      <template slot-scope="scope">
		        <el-button @click="query(scope.row)" type="primary" size="small">查看</el-button>
				<el-button @click="follow(scope.row)" type="success" size="small">跟进</el-button>
				<el-button @click="sign(scope.row)" type="info" size="small">{{scope.row.is_official == 0?'报名':'续报'}}</el-button>
				<el-button @click="scope.row.is_official == 0?del(scope.row):pay(scope.row)" type="danger" size="small">{{scope.row.is_official == 0?'删除':'缴费'}}</el-button>
		      </template>
		    </el-table-column>
		</el-table>
		<!-- 查看弹窗 -->
		<el-dialog title="查看" :visible.sync="showQuery" width="1500px">
			<add-students :semesterList="semesterList" :lessionList="lessionList" :queryStudent="queryStudent" ref="add"></add-students>
		</el-dialog>
		<!-- 跟进弹窗 -->
		<el-dialog title="跟进" :visible.sync="showFollow" width="1500px">
			<add-students :semesterList="semesterList" :lessionList="lessionList" :queryStudent="queryStudent" :sturow="sturow" :showFollow="showFollow" ref="fol"></add-students>
		</el-dialog>
		<!-- 报名弹窗 -->
		<el-dialog title="报名" :visible.sync="showSign" width="1500px">
			<sign-student :semesterList="semesterList" :lessionList="lessionList" :sturow="sturow"></sign-student>
		</el-dialog>
		<!-- 缴费弹窗 -->
		<el-dialog title="学员缴费录入" :visible.sync="showPay" width="700px">
			<pay-order :semesterList="semesterList" :lessionList="lessionList" :sturow="sturow" :studentDes="studentDes" ref="pay"></pay-order>
		</el-dialog>
	</div>
</template>

<script>
import {
    selectStudent,
    addStudent,
    delStudent,
	querySemesterData,
	queryLession,
	selectStudentById,
} from '@/api/studentRecruit.js'
import addStudents from '../add/addStudent.vue'
import signStudent from '../sign/signStudent.vue'
import payOrder from '../pay/payOrder.vue'
export default {
	components:{
		addStudents,
		signStudent,
		payOrder,
	},
	data() {
		return{
			status:[
				{
					status_name:'无状态',
					value:0,
				},
				{
					status_name:'跟进',
					value:1,
				},
				{
					status_name:'未跟进',
					value:2,
				},
				{
					status_name:'已注册',
					value:3,
				},
				{
					status_name:'未缴费',
					value:4,
				},
				{
					status_name:'未注册',
					value:5,
				},
				{
					status_name:'欠费',
					value:6,
				},
			],
			sturow:null, //点击获取当前学生信息
			showFollow:false, //跟进学生弹窗
			showQuery:false, //查看学生弹窗
			showSign:false, //报名学生弹窗
			showPay:false, //缴费弹窗
			studentDes:{}, //根据ID查询学生详情
		}
	},
	created() {
		
	},
	methods:{
		//查看
		query(row){
			console.log('查看');
			this.showQuery = true
			if(this.showQuery){
			  //等弹窗加载完
			  this.$nextTick(() => {
			    this.$refs.add.clickQuery(row)
			  })
			}
		},
		//跟进
		follow(row){
			console.log('跟进');
			this.sturow = row
			console.log(this.sturow);
			this.showFollow = true
			if(this.showFollow){
			  //等弹窗加载完
			  this.$nextTick(() => {
			    this.$refs.fol.clickQuery(row)
			  })
			}
		},
		//报名
		sign(row){
			console.log('报名',row);
			this.sturow = row
			this.showSign = true
		},
		//删除
		async del(row){
			let resData = {
				unid:row.unid
			}
			let data = await delStudent(resData)
			if(data.code == 200){
				this.$message.success('删除成功！')
				this.queryStudent()
			}
		},
		//缴费
		async pay(row){
			this.sturow = row
			let resData = {
				unid:this.sturow.unid
			}
			let data = await selectStudentById(resData)
			if(data.code == 200){
				this.studentDes = data.data
			}
			this.showPay = true
			console.log('data',data);
			console.log('缴费',row);
			this.$nextTick(() => {
				this.$refs.pay.queryOrder()
			})
		},
	},
	props:{
		semesterList:{
			type:Array,
			default:[],
		},
		lessionList:{
			type:Array,
			default:[],
		},
		studentList: {
			type: Array,
			default: []
		},
		queryStudent:{
			type: Function,
			default: () => {}
		}
	}
}
</script>

<style>
	.item {
	    margin: 10px auto;
		text-align: center;
	}
	.cell{
		text-align: center
	}
</style>
